//个人账户

<template>
  <a-layout>
    <a-layout-content>
      <!-- 个人碳账户列表 -->
      <a-card title="个人碳账户列表" bordered="{false}">
        <a-button type="primary" @click="addAccount" style="margin-bottom: 10px"
          >新增账户</a-button
        >
        <a-table :columns="columns" :dataSource="accounts" rowKey="id" bordered>
          <template #action="{ record }">
            <a-button type="link" @click="editAccount(record)">修改</a-button>
            <a-button type="link" @click="deleteAccount(record)">删除</a-button>
          </template>
        </a-table>
      </a-card>
      <!-- 新增/修改个人碳账户表单 -->
      <a-modal
        v-model:visible="isModalVisible"
        title="新增/修改个人碳账户"
        @ok="saveAccount"
        @cancel="resetForm"
      >
        <a-form layout="vertical">
          <!-- 姓名 -->
          <a-form-item label="姓名">
            <a-input v-model:value="form.name" placeholder="请输入姓名" />
          </a-form-item>

          <!-- 所在企业 -->
          <a-form-item label="所在企业">
            <a-input v-model:value="form.company" placeholder="请输入所在企业" />
          </a-form-item>

          <!-- 非工作碳排放复选框 -->
          <a-checkbox
            v-model:value="form.includeNonWorkEmissions"
            @change="toggleNonWorkEmissions"
            >包含非工作碳排放</a-checkbox
          >

          <!-- 工作碳排放表单（未勾选时显示） -->
          <div v-if="!form.includeNonWorkEmissions">
            <h3>工作碳排放</h3>
            <a-form-item label="办公场所能源使用 (kWh)">
              <a-input
                v-model:value="form.officeEnergy"
                placeholder="请输入办公场所能源使用量"
              />
            </a-form-item>
            <h4>通勤</h4>
            <a-form-item label="私家车 - 行驶距离 (公里)">
              <a-input
                v-model:value="form.commuteCarDistance"
                placeholder="请输入私家车行驶距离"
              />
            </a-form-item>
            <a-form-item label="私家车 - 燃油类型">
              <a-input
                v-model:value="form.commuteCarFuelType"
                placeholder="请输入燃油类型"
              />
            </a-form-item>
            <a-form-item label="私家车 - 燃油效率 (升/100公里)">
              <a-input
                v-model:value="form.commuteCarFuelEfficiency"
                placeholder="请输入燃油效率"
              />
            </a-form-item>
            <a-form-item label="公交车行驶距离 (公里)">
              <a-input
                v-model:value="form.commuteBusDistance"
                placeholder="请输入公交车行驶距离"
              />
            </a-form-item>
            <a-form-item label="地铁行驶距离 (公里)">
              <a-input
                v-model:value="form.commuteSubwayDistance"
                placeholder="请输入地铁行驶距离"
              />
            </a-form-item>

            <!-- 工作相关出差 -->
            <h4>工作相关出差</h4>
            <a-form-item label="飞机行程 (公里)">
              <a-input
                v-model:value="form.businessTripFlight"
                placeholder="请输入飞机行程"
              />
            </a-form-item>
            <a-form-item label="火车行程 (公里)">
              <a-input
                v-model:value="form.businessTripTrain"
                placeholder="请输入火车行程"
              />
            </a-form-item>
          </div>
          <!-- 非工作碳排放表单（勾选后显示） -->
          <div v-if="form.includeNonWorkEmissions">
            <h3>非工作碳排放</h3>
            <!-- 家庭能源使用 -->
            <a-form-item label="电力消耗 (kWh)">
              <a-input
                v-model:value="form.homeElectricity"
                placeholder="请输入家庭电力消耗量"
              />
            </a-form-item>
            <a-form-item label="天然气使用 (立方米)">
              <a-input v-model:value="form.homeGas" placeholder="请输入天然气使用量" />
            </a-form-item>
            <a-form-item label="其他能源使用 (单位)">
              <a-input
                v-model:value="form.homeOtherEnergy"
                placeholder="请输入其他能源使用量"
              />
            </a-form-item>

            <!-- 交通出行 -->
            <h4>交通出行</h4>
            <a-form-item label="私家车 - 行驶距离 (公里)">
              <a-input
                v-model:value="form.homeCommuteCarDistance"
                placeholder="请输入私家车行驶距离"
              />
            </a-form-item>
            <a-form-item label="私家车 - 燃油类型">
              <a-input
                v-model:value="form.homeCommuteCarFuelType"
                placeholder="请输入燃油类型"
              />
            </a-form-item>
            <a-form-item label="私家车 - 燃油效率 (升/100公里)">
              <a-input
                v-model:value="form.homeCommuteCarFuelEfficiency"
                placeholder="请输入燃油效率"
              />
            </a-form-item>
            <a-form-item label="公交车行驶距离 (公里)">
              <a-input
                v-model:value="form.homeCommuteBusDistance"
                placeholder="请输入公交车行驶距离"
              />
            </a-form-item>
            <a-form-item label="地铁行驶距离 (公里)">
              <a-input
                v-model:value="form.homeCommuteSubwayDistance"
                placeholder="请输入地铁行驶距离"
              />
            </a-form-item>

            <!-- 饮食消费 -->
            <h4>饮食消费</h4>
            <a-form-item label="肉类 (kg)">
              <a-input v-model:value="form.meat" placeholder="请输入肉类消耗量" />
            </a-form-item>
            <a-form-item label="奶制品 (kg)">
              <a-input v-model:value="form.dairy" placeholder="请输入奶制品消耗量" />
            </a-form-item>
            <a-form-item label="蔬菜 (kg)">
              <a-input v-model:value="form.vegetables" placeholder="请输入蔬菜消耗量" />
            </a-form-item>
            <a-form-item label="水果 (kg)">
              <a-input v-model:value="form.fruits" placeholder="请输入水果消耗量" />
            </a-form-item>
            <a-form-item label="食物浪费 (kg)">
              <a-input v-model:value="form.foodWaste" placeholder="请输入食物浪费量" />
            </a-form-item>

            <!-- 购物和消费 -->
            <h4>购物和消费</h4>
            <a-form-item label="衣物购买 (件)">
              <a-input v-model:value="form.clothes" placeholder="请输入衣物购买件数" />
            </a-form-item>
            <a-form-item label="电子产品购买 (件)">
              <a-input
                v-model:value="form.electronics"
                placeholder="请输入电子产品购买件数"
              />
            </a-form-item>
            <a-form-item label="家具购买 (件)">
              <a-input v-model:value="form.furniture" placeholder="请输入家具购买件数" />
            </a-form-item>

            <!-- 废弃物管理 -->
            <h4>废弃物管理</h4>
            <a-form-item label="垃圾产生 (kg)">
              <a-input v-model:value="form.garbage" placeholder="请输入垃圾产生量" />
            </a-form-item>
            <a-form-item label="回收利用 (kg)">
              <a-input v-model:value="form.recycling" placeholder="请输入回收利用量" />
            </a-form-item>
            <!-- 水资源使用 -->
            <h4>水资源使用</h4>
            <a-form-item label="家庭用水 (立方米)">
              <a-input v-model:value="form.homeWater" placeholder="请输入家庭用水量" />
            </a-form-item>
            <a-form-item label="用水用途">
              <a-input v-model:value="form.waterUsage" placeholder="请输入用水用途" />
            </a-form-item>
          </div>
        </a-form>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";

// 个人碳账户数据
const accounts = ref([
  {
    id: 1,
    name: "张三",
    company: "企业A",
    workEmissions: "100 kg CO2",
    nonWorkEmissions: "200 kg CO2",
  },
  {
    id: 2,
    name: "李四",
    company: "企业B",
    workEmissions: "150 kg CO2",
    nonWorkEmissions: "250 kg CO2",
  },
]);

// 表单数据
const form = ref({
  name: "",
  company: "",
  officeEnergy: null,
  commuteCarDistance: null,
  commuteCarFuelType: "",
  commuteCarFuelEfficiency: null,
  commuteBusDistance: null,
  commuteSubwayDistance: null,
  businessTripFlight: null,
  businessTripTrain: null,
  includeNonWorkEmissions: false,
  homeElectricity: null,
  homeGas: null,
  homeOtherEnergy: null,
  homeCommuteCarDistance: null,
  homeCommuteCarFuelType: "",
  homeCommuteCarFuelEfficiency: null,
  homeCommuteBusDistance: null,
  homeCommuteSubwayDistance: null,
  meat: null,
  dairy: null,
  vegetables: null,
  fruits: null,
  foodWaste: null,
  clothes: null,
  electronics: null,
  furniture: null,
  garbage: null,
  recycling: null,
  homeWater: null,
  waterUsage: null,
});

// 是否显示新增/修改账户的对话框
const isModalVisible = ref(false);

// 表格列配置
const columns = [
  { title: "姓名", dataIndex: "name", key: "name", align: "center" },
  { title: "所在企业", dataIndex: "company", key: "company", align: "center" },
  {
    title: "工作碳排放",
    dataIndex: "workEmissions",
    key: "workEmissions",
    align: "center",
  },
  {
    title: "非工作碳排放",
    dataIndex: "nonWorkEmissions",
    key: "nonWorkEmissions",
    align: "center",
  },
  { title: "操作", key: "action", slots: { customRender: "action" }, align: "center" },
];
// 新增账户
const addAccount = () => {
  resetForm();
  isModalVisible.value = true;
};
// 编辑账户
const editAccount = (record) => {
  form.value = { ...record };
  isModalVisible.value = true;
};

// 删除账户
const deleteAccount = (record) => {
  accounts.value = accounts.value.filter((account) => account.id !== record.id);
};

// 保存账户
const saveAccount = () => {
  if (form.value.id) {
    const index = accounts.value.findIndex((account) => account.id === form.value.id);
    if (index !== -1) {
      accounts.value[index] = { ...form.value };
    }
  } else {
    form.value.id = Date.now();
    accounts.value.push({ ...form.value });
  }
  isModalVisible.value = false;
  resetForm();
};

// 重置表单
const resetForm = () => {
  form.value = {
    name: "",
    company: "",
    officeEnergy: null,
    commuteCarDistance: null,
    commuteCarFuelType: "",
    commuteCarFuelEfficiency: null,
    commuteBusDistance: null,
    commuteSubwayDistance: null,
    businessTripFlight: null,
    businessTripTrain: null,
    includeNonWorkEmissions: false,
    homeElectricity: null,
    homeGas: null,
    homeOtherEnergy: null,
    homeCommuteCarDistance: null,
    homeCommuteCarFuelType: "",
    homeCommuteCarFuelEfficiency: null,
    homeCommuteBusDistance: null,
    homeCommuteSubwayDistance: null,
    meat: null,
    dairy: null,
    vegetables: null,
    fruits: null,
    foodWaste: null,
    clothes: null,
    electronics: null,
    furniture: null,
    garbage: null,
    recycling: null,
    homeWater: null,
    waterUsage: null,
  };
};
// 切换显示非工作碳排放
const toggleNonWorkEmissions = (e) => {
  if (e.target.checked) {
    form.value.includeNonWorkEmissions = true;
  } else {
    form.value.includeNonWorkEmissions = false;
  }
  if (!form.value.includeNonWorkEmissions) {
    form.value.homeElectricity = null;
    form.value.homeGas = null;
    form.value.homeOtherEnergy = null;
    form.value.homeCommuteCarDistance = null;
    form.value.homeCommuteCarFuelType = "";
    form.value.homeCommuteCarFuelEfficiency = null;
    form.value.homeCommuteBusDistance = null;
    form.value.homeCommuteSubwayDistance = null;
    form.value.meat = null;
    form.value.dairy = null;
    form.value.vegetables = null;
    form.value.fruits = null;
    form.value.foodWaste = null;
    form.value.clothes = null;
    form.value.electronics = null;
    form.value.furniture = null;
    form.value.garbage = null;
    form.value.recycling = null;
    form.value.homeWater = null;
    form.value.waterUsage = null;
  }
};
</script>

<style scoped>
a-layout {
  background: #f0f2f5;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

a-button {
  margin-top: 16px;
}
</style>
